<template>
    <div class="sticky top-0 mx-auto z-30 bg-stone-50 border-b-[1px]">
        <div class="max-w-screen-xl h-16 mx-auto flex justify-between items-center px-4">
            <div>
                <img src="../assets/logolight.svg" class="w-32 h-auto mx-auto" />
            </div>

            <!-- 右侧区域 -->
            <div class="flex items-center">
                <div class="hidden md:flex items-center text-sm">
                    <p class="mr-8 cursor-pointer" @click="routeTo('home')">首页</p>
                    <p class="mr-8 cursor-pointer" @click="routeTo('tools')">工具集</p>
                    <p class="mr-8 cursor-pointer" @click="routeTo('config')">配置</p>
                </div>
                <div class="hidden md:flex w-[1px] h-4 bg-stone-200 mr-4"></div>
                <div class="hidden md:flex">
                    <el-switch v-model="value1">
                        <template #active-action>
                            <el-icon><Moon /></el-icon>
                        </template>
                        <template #inactive-action>
                            <el-icon color="#666"><Sunny /></el-icon>
                        </template>
                    </el-switch>
                </div>
                <div class="hidden md:flex w-[1px] h-4 bg-stone-200 mx-4"></div>
                <div class="hidden md:flex items-center">
                    <div class="mr-4">
                        <img
                            class="w-5 cursor-pointer"
                            src="https://cdn.krisli.cn/imgs/gitee.png"
                        />
                    </div>
                    <div>
                        <img
                            class="w-5 cursor-pointer"
                            src="https://cdn.krisli.cn/imgs/github.png"
                        />
                    </div>
                </div>
                <div class="md:hidden flex justify-center items-center">
                    <el-icon size="24"><Menu /></el-icon>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Sunny, Moon, TopRight, Menu } from '@element-plus/icons-vue';

const value1 = ref(true);

import { useRoute, useRouter } from 'vue-router';
const router = useRouter();
const route = useRoute();

const routeTo = (path: string) => {
    console.log(path);
    router.push({
        path,
        query: {
            ...route.query,
        },
    });
};
</script>
